<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <meta charset="utf-8">
    <title>牛皮-layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <!-- 引入通用的js, css等 -->
    <jsp:include page="${request.contextPath}/static/include.jsp" flush="true" />

</head>
<body>

<form id="_form" class="layui-form" action="">
    <div class="layui-inline">
        <label class="layui-form-label" style="padding-left: 0px;">车牌</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" name="Q_plateNumber_S_LK">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">车型</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" name="Q_carType_S_LK">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-inline">
            <select name="Q_state_N_EQ">
                <!-- 状态：1空闲，2预约中，3使用中，4维修中 -->
                <option value="">请选择车辆状态</option>
                <option value="1">空闲</option>
                <option value="2">预约中</option>
                <option value="3">使用中</option>
                <option value="4">维修中</option>
            </select>
        </div>
    </div>

    <button type="button" class="layui-btn layui-icon search_btn" style="margin-left: 30px;padding: 0 10px;">&#xe615;&nbsp;查询</button>
    <button type="button" class="layui-btn layui-icon layui-btn-primary reset_btn" style="margin-left:5px;padding: 0 10px;">&#xe669;&nbsp;重置</button>

    <script type="text/html" id="_tableToolbar">
        <div class="table-tool-btn">
            <button type="button" class="layui-btn layui-icon-add-1 layui-icon"
                    onclick="toPage('module/fileUpload/jsp/add')">新增</button>
            <button type="button" class="layui-btn layui-icon-delete layui-icon" id="deleteBatch">批量删除</button>
        </div>
    </script>
    <table id="_table" lay-filter="_table"></table>
</form>
</body>

<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="useCarDetail">预约用车情况</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>

<script type="text/javascript">
    layui.use([ 'form', 'layer', 'table', 'laydate' ], function() {
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery,
            laydate = layui.laydate,
            table = layui.table;

        var tableIns = table.render({
            elem : '#_table'
            ,url : __ctxPath + '/framework/meetingRoom.do?method=list'
            ,cellMinWidth : 120 //全局定义所有常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级低于表头参数中的 minWidth
            ,page : true //开启分页（默认：false）
            ,height : "full-75" //设定容器高度
            ,limits : [ 10, 15, 20, 25 ] //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。优先级低于 page 参数中的 limits 参数。
            ,limit : 15 //每页显示的条数（默认：10）。值务必对应 limits 参数的选项。优先级低于 page 参数中的 limit 参数。
            ,toolbar : '#_tableToolbar' //开启工具栏（动态列素筛选、导出、打印）
            ,loading : true //开启加载效果（默认false）
            ,id : "_table"
            ,initSort: {
                field: 'updateTime', //排序字段，对应 cols 设定的各字段名
                type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
            }
            ,request : {
                pageName : 'page', //页码的参数名称，默认：page
                limitName : 'rows' //每页数据量的参数名，默认：limit
            }
            ,cols : [ [
                {
                    type : "checkbox"
                    ,fixed : "left"
                    ,width : 50
                }, {
                    field : "lid"
                    ,title : "主键"
                    ,hide : true
                }, {
                    field : "floor"
                    ,title : "楼层"
                    ,align : "left"
                    ,sort : true
                }, {
                    field : "num"
                    ,title : "会议室号"
                    ,align : "left"
                    ,sort : true
                    ,templet : function(data){
                        return '<a class="tds-table-detail">'+data.num+'</a>';
                    }
                }, {
                    field : "seatNum"
                    ,title : "座位"
                    ,align : "right"
                    ,sort : true
                }, {
                    field : "type"
                    ,title : "会议室类型"
                    ,align : "right"
                    ,sort : true
                }, {
                    field : "device"
                    ,title : "设备工具"
                    ,align : "right"
                    ,sort : true
                }, {
                    field : "createTime"
                    ,title : "创建时间"
                    ,align : "left"
                    ,sort : true
                    ,width : 180
                }, {
                    field : "updateTime"
                    ,title : "修改时间"
                    ,align : "left"
                    ,sort : true
                    ,width : 180
                }, {
                    title : '操作'
                    ,templet : '#tableBar'
                    ,fixed : "right"
                    ,align : "center"
                    ,width : 220
                }
            ] ],
            done : function(res, curr, count) {
                $("#deleteBatch").on("click", function() {
                    layer.confirm('确定删除所选的' + table.checkStatus('_table').data.length + '该记录？', {
                        icon : 3,
                        title : '提示信息'
                    }, function(index) {
                        var lids = getLidsOfSelections(table, '_table', 'lid');
                        ajax("/office/car/CarInfo.do?method=delete", {
                            lid : lids
                        });
                    });
                });
            }
        });

        //监听table行内编辑按钮
        table.on('tool(_table)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var layEvent = obj.event,
                data = obj.data,
                tr = obj.tr;
            if (layEvent === 'edit') { //编辑
                /*toPage("/office/car/CarInfo.do?method=toEditOrDetail", {
                    lid : data.lid,
                    pageUrl : "business/office/car/carManager/jsp/update",
                    pageType : TO_EDIT
                });*/
            } else if (layEvent === 'del') { //删除
                layer.confirm('确定删除该记录？', {
                    icon : 3,
                    title : '提示信息'
                }, function(index) {
                    ajax("/office/car/CarInfo.do?method=delete", {lid : data.lid});
                });
            } else if (layEvent == 'detail') { //查看明细
                detail(data);
            }
        });

        //监听行双击事件
        table.on('rowDouble(_table)', function(obj) {
            alert("双击了行");
        });
        //查看明细
        function detail(data) {
            alert("查看明细");
            /*toPage("/office/car/CarInfo.do?method=toEditOrDetail", {
                pageType : PAGE_TYPE_TOView,
                lid : data.lid,
                pageUrl : "business/office/car/carManager/jsp/detail"
            });*/
        }
    })
</script>
</html>
